<script setup lang="ts">
import { provide, ref, watch } from 'vue';
// 类型导入
import type{ CollaEmits, CollaProps, IdType} from './types';
import { MyCollaContextKey } from './types';


// 接收 来自外界的参数 & 注册事件
const props = defineProps<CollaProps>()
const emit = defineEmits<CollaEmits>()

// 优化点：（如果外部传过来的 数据更新，内部需要识别）
// 但是 activeItem 只是被赋值了一遍
// 所以需要进行 另外监控
watch(()=>{return props.modelValue},()=>{
  activeItem.value = props.modelValue
})


// 存放 展开的 item的数组 (先写死，本来初始值是外地传过来的)
const activeItem = ref<IdType[]>(props.modelValue) // TODO

// 判断 是否需要 手风琴模式
// 这段代码会顺序执行
// 在初始化了 activeItem 后进行判断（手风琴模式的判断）
if(props.accordion && activeItem.value.length > 1){
  console.warn("手风琴 最多只能同时展开一个标签")
  activeItem.value = [activeItem.value[0]]// 手动规范化（只允许一个展开的item）
}

// 数组的维护函数 (控制元素的添加和删除)
const handleActiveItem = (item : IdType)=>{
  // 考虑手风琴模式
  if(props.accordion){
    activeItem.value = [activeItem.value.includes(item) ? '' : item]
  }
  else{
    const index = activeItem.value.indexOf(item)
    if(index>-1)activeItem.value.splice(index,1)
    else activeItem.value.push(item)
  }
  // modelValue 需要更新
  emit('update:modelValue',activeItem.value)// 双向绑定，数据更新
  emit('change',activeItem.value)// 自动触发change事件
}

// 由于 父组件里面的内容是 slot ，
// 为了简单，采用 context 传递数据的方法
// provide & inject (依赖注入的技术)
provide(MyCollaContextKey,{
  activeItem,
  handleActiveItem,
})

</script>

<template>
  <div class="lxh-myColla">
    <slot></slot>
  </div>
</template>

<style>
</style>